<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">全网报表</div>
    </div>
    <div class="banner">
      <Tabs type="card" @on-click="changeTab" v-model="thisName">
        <TabPane label="存储矿工挖矿明细" name="1">
          <div class="time">
            <Row style="display:inline-block;margin-right:10px;">
              <Col>
              <DatePicker type="date" placeholder="开始时间" style="width: 200px" :value="beginTime" @on-change="action" @on-clear="clearBegin"></DatePicker>
              <TimePicker :value="beginHours" format="HH点mm分" placeholder="开始时分秒" style="width: 130px;margin-left:5px;" :clearable="false" @on-change="setBeginHours" hide-disabled-options :disabled-seconds="celSecond"></TimePicker>
              </Col>
            </Row>
            <span>~</span>
            <Row style="display:inline-block;margin-left:10px;">
              <Col>
              <DatePicker type="date" placeholder="结束时间" style="width: 200px" :value="endTime" @on-change="cut" @on-clear="clearEnd"></DatePicker>
              <TimePicker :value="endHours" format="HH点mm分" placeholder="结束时分秒" style="width: 130px;margin-left:5px;" :clearable="false" hide-disabled-options @on-change="setEndHours" :disabled-seconds="celSecond"></TimePicker>
              </Col>
            </Row>
            <Button type="primary" @click="check" style="margin-left:20px;">查询</Button>
            <Button type="primary" size="large" @click="exportData()" style="margin-left:10px;">导出</Button>
          </div>
          <Table :columns="columnsData" :data="showData" :border="true" :loading="isShow" ref="table" :row-class-name="rowClassName">
            <template slot-scope="{ row }" slot="address">
              <Tooltip :content="row.address" max-width="200">{{hideWord(row.address)}}</Tooltip>
            </template>
            <template slot-scope="{ row }" slot="parentHashes">
              <Tooltip :content="row.parentHashes" max-width="200">{{hideWord(row.parentHashes)}}</Tooltip>
            </template>
            <template slot-scope="{ row }" slot="peerId">
              <Tooltip :content="row.peerId" max-width="200">{{hideWord(row.peerId)}}</Tooltip>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <div>
                <Button style="margin-right: 5px;" @click="toMiner(row, index)">查看</Button>
              </div>
            </template>
            <!-- -------------------单元格合并------------------------ -->
            <!-- 有效存储 -->
            <template slot-scope="{ row }" slot="capacityShow">
              <span>{{ row.capacity }}</span>
              <span style="font-weight:bold;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>
              <span v-if="parseFloat(row.capacityUp) >= 0" style="color:red">{{ row.capacityUp }}
              </span>
              <span v-else style="color:green">{{ row.capacityUp }}</span>
            </template>
            <!-- 算力 -->
            <template slot-scope="{ row }" slot="powShow">
              <span>{{ row.power_1 }}</span>
              <span style="font-weight:bold;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>
              <span v-if="parseFloat(row.powUp) > 0" style="color:red">{{row.powUp_1}}</span>
              <span v-else style="color:green">{{ row.powUp_1 }}</span>
            </template>
            <!-- 余额 -->
            <template slot-scope="{ row }" slot="balanceShow">
              <span>{{ row.balance }}</span>
              <span style="font-weight:bold;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>
              <span v-if="parseFloat(row.balanceUp) > 0" style="color:red">{{row.balanceUp}}
              </span>
              <span v-else style="color:green">{{ row.balanceUp }}</span>
              <span style="font-weight:bold;">&nbsp;&nbsp;/&nbsp;&nbsp;</span>
              <span v-if="parseFloat(row.balanceUpPercent) > 0" style="color:red">{{ row.balanceUpPercent }}%</span>
              <span v-else style="color:green">{{ row.balanceUpPercent }}%</span>
            </template>
            <!-- 挖矿效率 -->
            <template slot-scope="{ row }" slot="effectiveness">
              <span v-if="parseFloat(row.effectiveness) > 0" style="color:red">{{ row.effectiveness }}%</span>
              <span v-else style="color:green">{{ row.effectiveness }}%</span>
            </template>
          </Table>
          <Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total :page-size-opts="size" placement="top" @on-change="handlePage" style="margin-top:20px;" show-sizer @on-page-size-change="changeNum"></Page>
        </TabPane>
        <TabPane label="图表" name="2">
          <div class="baseDate" style="height:500px">
            <div class="date" style="width:49%;float:left">
              <div style="margin-left:50px;">
                <DatePicker :value="paramDateCapacity.beginTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="开始时间" style="width: 200px" @on-change="changeDateStart"></DatePicker>
                <DatePicker :value="paramDateCapacity.endTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="结束时间" style="width: 200px;margin-left:5px;" @on-change="changeDateEnd"></DatePicker>
                <TimePicker :value="nowHours" format="HH点mm分" type="timerange" placement="bottom-end" :clearable="false" placeholder="Select time" style="width: 180px;margin-left:5px;" @on-change="changHourPic"></TimePicker>
                <Button type="primary" @click="checkPic" style="margin-left:20px;">查询</Button>
              </div>
              <div id="capacityUp" style="min-width:400px;height:400px;margin-top:10px;"></div>
            </div>
            <div class="date" style="width:49%;float:right">
              <div style="margin-left:50px;">
                <DatePicker :value="paramDateBalanceUp.beginTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="开始时间" style="width: 200px" @on-change="changeDateBalanceUpStart"></DatePicker>
                <DatePicker :value="paramDateBalanceUp.endTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="结束时间" style="width: 200px;margin-left:5px;" @on-change="changeDateBalanceUpEnd"></DatePicker>
                <TimePicker :value="nowHoursBalanceUp" format="HH点mm分" type="timerange" placement="bottom-end" :clearable="false" placeholder="Select time" style="width: 180px;margin-left:5px;" @on-change="changHourBalanceUpPic"></TimePicker>
                <Button type="primary" @click="checkBalanceUpPic" style="margin-left:20px;">查询</Button>
              </div>
              <div id="balanceUp" style="min-width:400px;height:400px;margin-top:10px;"></div>
            </div>
          </div>
          <!-- <div style="width:45%;margin-top:50px;clear:both;height:500px">
            <DatePicker :value="paramDatebalanceUpPercent.beginTimePic" format="yyyy-MM-dd" :clearable='false' type="date" placeholder="开始时间" style="width: 200px" @on-change="changeDatebalanceUpPercentStart"></DatePicker>
            <DatePicker :value="paramDatebalanceUpPercent.endTimePic" format="yyyy-MM-dd" :clearable='false' type="date" placeholder="结束时间" style="width: 200px;margin-left:5px;" @on-change="changeDatebalanceUpPercentEnd"></DatePicker>
            <TimePicker :value="nowHoursbalanceUpPercent" format="HH点mm分" type="timerange" placement="bottom-end" :clearable='false' placeholder="Select time" style="width: 180px;margin-left:5px;" @on-change="changHourbalanceUpPercentPic"></TimePicker>
            <Button type="primary" @click="checkPicbalanceUpPercent" style="margin-left:20px;">查询</Button>
            <div id="balanceUpPercent" style="min-width:400px;margin-top:20px;height:400px;"></div>
          </div>-->

          <div class="baseDate" style="margin-top:50px; clear:both">
            <div style="float:left;width:45%;">
              <DatePicker :value="paramDatePower.beginTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="开始时间" style="width: 200px" @on-change="changeDatePowerStart"></DatePicker>
              <DatePicker :value="paramDatePower.endTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="结束时间" style="width: 200px;margin-left:5px;" @on-change="changeDatePowerEnd"></DatePicker>
              <TimePicker :value="nowHoursPower" format="HH点mm分" type="timerange" placement="bottom-end" :clearable="false" placeholder="Select time" style="width: 180px;margin-left:5px;" @on-change="changHourPowerPic"></TimePicker>
              <Button type="primary" @click="checkPowerPic" style="margin-left:20px;">查询</Button>
              <div class="pie">
                <div id="power" style="min-width:400px;margin-top:20px;height:500px;"></div>
              </div>
            </div>

            <div style="float:right;width:45%;">
              <DatePicker :value="paramDateBlockPercentage.beginTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="开始时间" style="width: 200px" @on-change="changeDatePercentageStart"></DatePicker>
              <DatePicker :value="paramDateBlockPercentage.endTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="结束时间" style="width: 200px;margin-left:5px;" @on-change="changeDatePercentageEnd"></DatePicker>
              <TimePicker :value="nowHoursBlockPercentage" format="HH点mm分" type="timerange" placement="bottom-end" :clearable="false" placeholder="Select time" style="width: 180px;margin-left:5px;" @on-change="changHourPercentagePic"></TimePicker>
              <Button type="primary" @click="checkPercentagePic" style="margin-left:20px;">查询</Button>
              <div class="pie">
                <div id="blockPercentage" style="min-width:400px;margin-top:20px;height:500px;"></div>
              </div>
            </div>
          </div>
        </TabPane>
        <TabPane label="时间段内的图表" name="3">
          <div class="baseDate" style="clear:both">
            <div style="margin-top:50px;height:500px">
              <DatePicker :value="paramDateTime.beginTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="开始时间" style="width: 200px" @on-change="changeDateTimeStart"></DatePicker>
              <DatePicker :value="paramDateTime.endTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="结束时间" style="width: 200px;margin-left:5px;" @on-change="changeDateTimeEnd"></DatePicker>
              <TimePicker :value="nowHoursTime" format="HH点" type="timerange" placement="bottom-end" :clearable="false" placeholder="Select time" style="width: 180px;margin-left:5px;" @on-change="changHourTime"></TimePicker>
              <div class="miner">
                <span>矿机ID</span>
                <Input v-model="minerId" style="width:400px" />
                <Button type="primary" @click="checkPicTime" style="margin-left:20px;">查询</Button>
              </div>
              <div id="minerId" style="min-width:400px;margin-top:20px;height:400px;"></div>
            </div>
          </div>

          <div class="baseDate" style="clear:both">
            <div style="margin-top:100px;height:500px">
              <DatePicker :value="paramDateTimeBalance.beginTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="开始时间" style="width: 200px" @on-change="changeDateTimeStartBalance"></DatePicker>
              <DatePicker :value="paramDateTimeBalance.endTimePic" format="yyyy-MM-dd" :clearable="false" type="date" placeholder="结束时间" style="width: 200px;margin-left:5px;" @on-change="changeDateTimeEndBalance"></DatePicker>
              <TimePicker :value="nowHoursTimeBalance" format="HH点" type="timerange" placement="bottom-end" :clearable="false" placeholder="Select time" style="width: 180px;margin-left:5px;" @on-change="changHourTimeBalance"></TimePicker>
              <div class="miner">
                <span>矿机ID</span>
                <Input v-model="minerIdBalance" style="width:400px" />
                <Button type="primary" @click="checkPicTimeBalance" style="margin-left:20px;">查询</Button>
              </div>
              <div id="minerIdBalance" style="min-width:400px;margin-top:20px;height:400px;"></div>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js";
export default {
  name: "ReportForm",
  data() {
    return {
      thisName: "1",
      pieData: [],
      minerId: "t2bpnpyhumrkp5rtja5qnsmiklyo3wyibtnapcw5y",
      minerIdBalance: "t2bpnpyhumrkp5rtja5qnsmiklyo3wyibtnapcw5y",
      nowHoursTime: [],
      nowHoursTimeBalance: [],
      nowHoursBalanceUp: [],
      nowHoursPower: [],
      nowHoursBlockPercentage: [],
      nowHours: [],
      nowHoursbalanceUpPercent: [],
      picXData: [],
      picYData: [],
      beginHours: null,
      endHours: null,
      beginTime: null,
      endTime: null,
      isShow: true,
      pageTotal: 0,
      pageNum: 1,
      pageSize: 20,
      chart: null,
      columnsData: [
        {
          title: "存储矿工昵称",
          key: "nickname",
          align: "center",
          width: 130
        },
        {
          title: "有效存储/增长(GB)",
          key: "capacityShow",
          align: "center",
          slot: "capacityShow",
          width: 180,
          sortable: true,
          sortMethod: function (a, b, type) {
            let lenA = a.length;
            let lenB = b.length;
            let lenA_1 = a.indexOf("(");
            let lenB_1 = b.indexOf("(");
            let strA = a.slice(lenA_1 + 1, lenA - 1);
            let strB = b.slice(lenB_1 + 1, lenB - 1);

            let numA = parseFloat(strA);
            let numB = parseFloat(strB);
            if (type === "asc") {
              return numB < numA ? 1 : -1;
            } else if (type === "desc") {
              return numA > numB ? -1 : 1;
            }
          }
        },
        {
          title: "算力全网占比/增长",
          key: "powShow",
          slot: "powShow",
          align: "center",
          width: 200,
          sortable: true,
          sortMethod: function (a, b, type) {
            let lenA = a.length;
            let lenB = b.length;
            let lenA_1 = a.indexOf("/");
            let lenB_1 = b.indexOf("/");
            let strA_1 = a.slice(0, lenA - 1);
            let strB_1 = b.slice(0, lenB - 1);
            let lenA_2 = strA_1.indexOf("%");
            let lenB_2 = strB_1.indexOf("%");

            let strA = strA_1.slice(0, lenA_2);
            let strB = strB_1.slice(0, lenB_2);

            let numA = parseFloat(strA);
            let numB = parseFloat(strB);
            if (type === "asc") {
              return numB < numA ? 1 : -1;
            } else if (type === "desc") {
              return numA > numB ? -1 : 1;
            }
          }
        },
        {
          title: "区块百分比",
          key: "blockPercentage_1",
          align: "right",
          width: 130,
          sortable: true,
          sortMethod: function (a, b, type) {
            let lenA = a.length;
            let lenB = b.length;

            let strA = a.slice(0, lenA - 1);
            let strB = b.slice(0, lenB - 1);

            let numA = parseFloat(strA);
            let numB = parseFloat(strB);
            if (type === "asc") {
              return numB < numA ? 1 : -1;
            } else if (type === "desc") {
              return numA > numB ? -1 : 1;
            }
          }
        },
        {
          title: "累计余额/净增长增长/占全网增长",
          key: "balanceShow",
          slot: "balanceShow",
          align: "center",
          width: 300,
          sortable: true,
          sortMethod: function (a, b, type) {
            let lenA = a.length;
            let lenB = b.length;
            let lenA_1 = a.indexOf("(");
            let lenB_1 = b.indexOf("(");
            let lenA_2 = a.indexOf(")");
            let lenB_2 = b.indexOf(")");
            let strA = a.slice(lenA_1 + 1, lenA_2);
            let strB = b.slice(lenB_1 + 1, lenB_2);
            let numA = parseFloat(strA);
            let numB = parseFloat(strB);
            if (type === "asc") {
              return numB < numA ? 1 : -1;
            } else if (type === "desc") {
              return numA > numB ? -1 : 1;
            }
          }
        },
        {
          title: "挖矿效率",
          key: "effectiveness",
          slot: "effectiveness",
          align: "center",
          width: 150,
          sortable: true,
          sortMethod: function (a, b, type) {
            if (type === "asc") {
              return b < a ? 1 : -1;
            } else if (type === "desc") {
              return a > b ? -1 : 1;
            }
          }
        },
        {
          title: "区块高度",
          key: "blockHeight",
          align: "right",
          width: 120,
          sortable: true
        },
        {
          title: "查看矿机图表",
          slot: "action",
          align: "center",
          width: 130
        },
        {
          title: "区块时间",
          key: "blockTime",
          align: "center",
          width: 180
        },
        {
          title: "inConsensus",
          key: "inConsensus",
          align: "center",
          width: 100
        },
        {
          title: "上一次同步时间",
          key: "lastSeen",
          align: "center",
          width: 180
        },
        {
          title: "矿机编号",
          key: "minerNo",
          align: "center",
          width: 200
        },
        {
          title: "矿机地址",
          key: "address",
          slot: "address",
          align: "center",
          width: 180
        },
        {
          title: "区块BlockId",
          key: "parentHashes",
          slot: "parentHashes",
          align: "center",
          width: 200
        },
        {
          title: "peerId",
          key: "peerId",
          slot: "peerId",
          align: "center",
          width: 210
        }
      ],
      showData: [],
      controlBegin: 0,
      controlEnd: 0,
      size: [5, 50, 100, 200],
      totalBalanceUp: "",
      celMinutes: [],
      celSecond: [],
      /////图表
      paramDateCapacity: {
        beginHoursPic: null,
        endHoursPic: null,
        beginTimePic: null,
        endTimePic: null
      },
      paramDateBalanceUp: {
        beginHoursPic: null,
        endHoursPic: null,
        beginTimePic: null,
        endTimePic: null
      },
      paramDatePower: {
        beginHoursPic: null,
        endHoursPic: null,
        beginTimePic: null,
        endTimePic: null
      },
      paramDateBlockPercentage: {
        beginHoursPic: null,
        endHoursPic: null,
        beginTimePic: null,
        endTimePic: null
      },
      paramDatebalanceUpPercent: {
        beginHoursPic: null,
        endHoursPic: null,
        beginTimePic: null,
        endTimePic: null
      },
      paramDateTime: {
        beginHoursPic: null,
        endHoursPic: null,
        beginTimePic: null,
        endTimePic: null
      },
      paramDateTimeBalance: {
        beginHoursPic: null,
        endHoursPic: null,
        beginTimePic: null,
        endTimePic: null
      }
    };
  },
  created() {
    window.addEventListener("beforeunload", e => {
      localStorage.reLoad = "reLoadCash";
      localStorage.name = "1-6";
    });
  },
  mounted() {
    for (let i = 0; i < 61; i++) {
      this.celSecond.push(i);
    }
    this.Time(0);
  },
  methods: {
    ////////////////////////表格变色////////////////
    rowClassName(row, index) {
      if (row.minerNo) {
        return "demo-table-info-row";
      } else {
        return "";
      }

    },
    toMiner(row, index) {
      this.thisName = "3";
      this.minerId = row.address;
      this.minerIdBalance = row.address;
      this.minerPic("minerId", this.paramDateTime, this.nowHoursTime);
      this.minerPic(
        "minerIdBalance",
        this.paramDateTimeBalance,
        this.nowHoursTimeBalance
      );
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: "全网报表表格",
        original: false
      });
    },

    getReportData(pageNum, stratTime, nowTime, stratHours, endHours) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      if (stratHours.length < 6) {
        stratHours = stratHours + ":00";
      }
      if (endHours.length < 6) {
        endHours = endHours + ":00";
      }

      let payload = {
        page: pageNum,
        size: this.pageSize,
        beginTime: stratTime + " " + stratHours,
        endTime: nowTime + " " + endHours
      };
      this.isShow = true;
      this.$axios({
        method: "post",
        url: apis.reportApi,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            this.isShow = false;
            let data = res.data;
            this.pageTotal = parseInt(res.headers["x-total-count"]);
            data.forEach(element => {
              let a = parseFloat(element.blockPercentage) * 100;
              let b = a.toFixed(4);
              element.blockPercentage_1 = b + "%";

              let c = parseFloat(element.power) * 100;
              let d = c.toFixed(4);
              element.power_1 = d + "%";

              element.effectiveness = (
                (element.balanceUpPercent / parseFloat(d)) *
                100
              ).toFixed(4);

              let e = parseFloat(element.powUp) * 100;
              let f = e.toFixed(4);
              element.powUp_1 = f + "%";

              element.lastSeen = "(" + element.lastSeen + ")";

              element.blockTime = "(" + element.blockTime + ")";

              //算力组装
              element.powShow = element.power_1 + "(" + element.powUp_1 + ")";
              //有效存储组装
              element.capacityShow =
                element.capacity + "(" + element.capacityUp + ")";
              //余额组装
              element.balanceShow =
                element.balance + "(" + element.balanceUp + ")" + "(" + element.balanceUpPercent + ")";
            });
            this.showData = data;
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err);
          this.$Message.error(err.response.data.message);
        });
    },

    handlePage(value) {
      this.pageNum = value;
      if (!this.beginTime && !this.endTime) {
        this.Time(this.pageNum - 1);
      } else {
        this.checkCom(this.pageNum - 1);
      }
    },
    action(date) {
      this.beginTime = date;
    },
    cut(date) {
      this.endTime = date;
    },
    setBeginHours(hours) {
      let a = hours.replace(/点/, ":");
      let b = a.replace(/分/, ":");
      if (this.endHours.length < 5) {
        this.endHours = this.endHours + ":00";
      } else {
        let d = this.endHours.slice(0, 5);
        this.endHours = d + ":00";
      }
      this.beginHours = b + "00";
    },
    setEndHours(hours) {
      let a = hours.replace(/点/, ":");
      let b = a.replace(/分/, ":");
      if (this.beginHours.length < 5) {
        this.beginHours = this.beginHours + ":00";
      } else {
        let d = this.beginHours.slice(0, 5);
        this.beginHours = d + ":00";
      }

      this.endHours = b + "00";
    },
    check() {
      this.checkCom(0);
    },
    checkCom(pageNum) {
      // this.controlBegin = 0;
      // this.controlEnd = 0;
      if (!this.beginTime && this.endTime) {
        this.$Message.info("请选择开始时间");
        return;
      }
      if (this.beginTime && !this.endTime) {
        this.$Message.info("请选择结束时间");
        return;
      }
      if (!this.endHours) {
        this.$Message.info("请选择结束时间");
        return;
      }
      if (!this.beginHours) {
        this.$Message.info("请选择开始时间");
        return;
      }
      if (!this.beginTime && !this.endTime) {
        this.Time(pageNum);
      }
      if (this.beginTime && this.endTime) {
        this.getReportData(
          pageNum,
          this.beginTime,
          this.endTime,
          this.beginHours,
          this.endHours
        );
      }
    },
    hideWord(string) {
      if (string) {
        string = String(string);
        let len = string.length;
        let stringBefore = string.slice(0, 8);
        let stringBeHand = string.slice(len - 8, len);
        let newString = stringBefore + "..." + stringBeHand;
        return newString;
      } else {
        return "";
      }
    },
    //时间格式化
    dateFtt(fmt, date) {
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },
    //时间默认值
    Time(pageNum) {
      let a = new Date();
      let b = new Date();
      b.setHours(b.getHours() - 1);
      let hours = this.dateFtt("hh:mm", a);
      this.beginHours = this.dateFtt("hh:mm", b);
      this.endHours = hours;
      this.beginTime = this.dateFtt("yyyy-MM-dd", a);
      this.endTime = this.dateFtt("yyyy-MM-dd", a);

      this.getReportData(
        pageNum,
        this.beginTime,
        this.endTime,
        this.beginHours,
        this.endHours
      );
    },
    clearBegin() {
      this.beginTime = null;
      this.controlBegin = 1;
    },
    clearEnd() {
      this.endTime = null;
      this.controlEnd = 1;
    },
    changeNum(value) {
      this.pageSize = value;
      this.checkCom(0);
    },
    /////////////////////////////////////////////////////////图表/////////////////////////////
    columnPic(id, x, y, title, yAxisTitle, seriesTitle, typeName) {
      let chart = this.$highcharts.chart(id, {
        chart: {
          type: "column"
        },
        title: {
          text: title
        },
        credits: {
          enabled: false
        },
        xAxis: {
          categories: x,
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: yAxisTitle
          },
          lineWidth: 1
        },
        plotOptions: {
          column: {
            borderWidth: 0
          }
        },
        loading: {
          style: {
            position: "absolute", //默认值
            opacity: 0.5, //透明度
            textAlign: "center", //文字显示方式
            //backgroundColor: 'gray',//背景色
            backgroundImage:
              'url("https://static.oschina.net/uploads/img/201409/26073943_nCX5.gif")', //显示的背景动态gif图片，设置此项为gif图片即可实现常见的加载中动态效果图
            backgroundSize: "100% 100%" //设置背景图片铺满Series数据列区域
          }
        },
        series: [
          {
            name: seriesTitle,
            data: y
          }
        ]
      });
    },
    columnPic_1(id, x, y, title, yAxisTitle, seriesTitle) {

      let chart = this.$highcharts.chart(id, {
        chart: {
          renderTo: "container"
        },
        title: {
          text: title
        },
        credits: {
          enabled: false
        },
        xAxis: {
          crosshair: true,
          labels: {
            formatter: function () {
              return x[this.value];
            }
          },
          tickInterval: 1
        },
        yAxis: {
          startOnTick: false,
          title: {
            text: yAxisTitle
          },
          lineWidth: 1
        },
        series: [
          {
            name: seriesTitle,
            data: y
          }
        ]
      });
    },
    piePic(type, x, title) {
      let chart = this.$highcharts.chart(type, {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie"
        },
        credits: {
          enabled: false
        },
        title: {
          text: title
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.y:.1f}%</b>"
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.y:.1f} %",
              style: {
                color:
                  (this.$highcharts.theme &&
                    this.highcharts.theme.contrastTextColor) ||
                  "black"
              }
            }
          }
        },
        series: [
          {
            name: "percent",
            colorByPoint: true,
            data: x
          }
        ]
      });
    },
    getTimePicData(date, type, minerId) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }

      this.$axios({
        method: "post",
        url:
          apis.timePicApi +
          "/" +
          minerId +
          "/" +
          date.beginTimePic +
          date.beginHoursPic +
          "/" +
          date.endTimePic +
          date.endHoursPic,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.picXData = [];
            this.picYData = [];
            //有效算力增长
            if (type === "minerId") {
              let data = res.data.capacityUpList;
              let controlJ = 0;
              let beginTimePicNum = parseInt(date.beginTimePic.slice(6, 8));
              let endTimePicNum = parseInt(date.endTimePic.slice(6, 8));
              let beginHoursPicNum = parseInt(date.beginHoursPic);
              let endHoursPicNum = parseInt(date.endHoursPic);
              ///////////一天内////
              if (endTimePicNum - beginTimePicNum === 0) {
                for (let i = beginHoursPicNum; i <= endHoursPicNum; i++) {
                  this.picXData.push(beginTimePicNum + "号/" + i + "点");
                }
              } else {
                for (let i = beginTimePicNum; i <= endTimePicNum; i++) {
                  if (controlJ === 0) {
                    for (let j = beginHoursPicNum; j <= 23; j++) {
                      this.picXData.push(i + "号/" + j + "点");
                      if (j === 23) {
                        controlJ = 1;
                      }
                    }
                  } else {
                    for (let j = 0; j <= 23; j++) {
                      this.picXData.push(i + "号/" + j + "点");
                    }
                  }
                }
              }
              data.forEach(element => {
                this.picYData.push(element);
              });
              this.columnPic_1(
                type,
                this.picXData,
                this.picYData,
                "有效算力",
                "有效算力(GB)",
                "有效算力"
              );
            } else if (type === "minerIdBalance") {
              let data = res.data.balanceUpList;
              let controlJ = 0;
              let beginTimePicNum = parseInt(date.beginTimePic.slice(6, 8));
              let endTimePicNum = parseInt(date.endTimePic.slice(6, 8));
              let beginHoursPicNum = parseInt(date.beginHoursPic);
              let endHoursPicNum = parseInt(date.endHoursPic);
              //////////一天内////
              if (endTimePicNum - beginTimePicNum === 0) {
                for (let i = beginHoursPicNum; i <= endHoursPicNum; i++) {
                  this.picXData.push(beginTimePicNum + "号/" + i + "点");
                }
              } else {
                for (let i = beginTimePicNum; i <= endTimePicNum; i++) {
                  if (controlJ === 0) {
                    for (let j = beginHoursPicNum; j <= 23; j++) {
                      this.picXData.push(i + "号/" + j + "点");
                      if (j === 23) {
                        controlJ = 1;
                      }
                    }
                  } else {
                    for (let j = 0; j <= 23; j++) {
                      this.picXData.push(i + "号/" + j + "点");
                    }
                  }
                }
              }
              data.forEach(element => {
                this.picYData.push(element);
              });
              this.columnPic_1(
                type,
                this.picXData,
                this.picYData,
                "币增长",
                "币增长",
                "币增长"
              );
            }
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err);
          this.$Message.error(err.response.data.message);
        });
    },
    getReportPicData(pageNum, pageSize, date, type) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      if (date.beginHoursPic.length < 6) {
        date.beginHoursPic = date.beginHoursPic + ":00";
      }
      if (date.endHoursPic.length < 6) {
        date.endHoursPic = date.endHoursPic + ":00";
      }
      let payload = {
        page: pageNum,
        size: pageSize,
        beginTime: date.beginTimePic + " " + date.beginHoursPic,
        endTime: date.endTimePic + " " + date.endHoursPic
      };
      // let chart = this.$highcharts.chart("capacityUp");
      // chart.showLoading();
      this.$axios({
        method: "post",
        url: apis.reportApi,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            let data = res.data;
            //有效算力增长
            if (type === "capacityUp") {
              this.picXData = [];
              this.picYData = [];
              data.sort(function (a, b) {
                return b.capacityUp - a.capacityUp;
              });
              let dataSlice = data.slice(0, 20);
              dataSlice.forEach(element => {
                this.picXData.push(element.nickname);
                this.picYData.push(element.capacityUp);
              });
              this.columnPic(
                type,
                this.picXData,
                this.picYData,
                "有效算力增长值",
                "有效算力增长(GB)",
                "有效算力增长",
                "column"
              );
            }
            //余额增长
            if (type === "balanceUp") {
              this.picXData = [];
              this.picYData = [];
              data.sort(function (a, b) {
                return b.balanceUp - a.balanceUp;
              });
              let dataSlice = data.slice(0, 20);
              dataSlice.forEach(element => {
                this.picXData.push(element.nickname);
                this.picYData.push(element.balanceUp);
              });
              this.columnPic(
                type,
                this.picXData,
                this.picYData,
                "FIL余额增长值",
                "FIL余额增长",
                "FIL余额增长",
                "column"
              );
            }
            //算力全网占比
            if (type === "power") {
              this.pieData = [];
              data.sort(function (a, b) {
                return b.power - a.power;
              });
              let dataSlice = data.slice(0, 20);
              let sum = 0;
              let sumTotle = 0;
              data.forEach(element => {
                sumTotle = sumTotle + element.power;
              });
              dataSlice.forEach(element => {
                let temp_1 = {};
                temp_1.name = element.nickname;
                let a = parseFloat(element.power) * 100;
                temp_1.y = parseFloat(a.toFixed(4));
                sum = sum + element.power;
                this.pieData.push(temp_1);
              });
              let temp = {};
              let feng = sumTotle - sum;
              temp.y = feng * 100;
              temp.name = "其他";
              temp.sliced = true;
              temp.selected = true;
              this.pieData.push(temp);
              this.piePic(type, this.pieData, "算力全网占比");
            }
            //区块百分比
            if (type === "blockPercentage") {
              this.pieData = [];
              data.sort(function (a, b) {
                return b.blockPercentage - a.blockPercentage;
              });
              let dataSlice = data.slice(0, 20);
              let sum = 0;
              let sumTotle = 0;
              data.forEach(element => {
                sumTotle = sumTotle + element.blockPercentage;
              });
              dataSlice.forEach(element => {
                let temp_1 = {};
                temp_1.name = element.nickname;
                let a = parseFloat(element.blockPercentage) * 100;
                temp_1.y = parseFloat(a.toFixed(4));
                sum = sum + element.blockPercentage;
                this.pieData.push(temp_1);
              });
              let temp = {};
              let feng = sumTotle - sum;
              temp.y = feng * 100;
              temp.name = "其他";
              temp.sliced = true;
              temp.selected = true;
              this.pieData.push(temp);
              this.piePic(type, this.pieData, "区块百分比");
            }
            //余额增长/算力
            if (type === "balanceUpPercent") {
              this.picXData = [];
              this.picYData = [];
              data.forEach(element => {
                let a = element.balanceUpPercent / 100;
                element.powerBalance = a / element.power;
              });
              data.sort(function (a, b) {
                return b.powerBalance - a.powerBalance;
              });
              let dataSlice = data.slice(0, 20);
              dataSlice.forEach(element => {
                element.powerBalanceShow = parseFloat(
                  element.powerBalance.toFixed(4)
                );
                this.picXData.push(element.nickname);
                this.picYData.push(element.powerBalanceShow);
              });
              this.columnPic(
                type,
                this.picXData,
                this.picYData,
                "余额增长/算力全网占比",
                "余额增长/算力全网占比",
                "余额增长/算力全网占比",
                "column"
              );
            }
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err);
          this.$Message.error(err.response.data.message);
        });
    },
    changeTab(name) {
      if (name === "2") {
        this.timePic("capacityUp", this.paramDateCapacity, this.nowHours);
        this.timePic(
          "balanceUp",
          this.paramDateBalanceUp,
          this.nowHoursBalanceUp
        );
        this.timePic("power", this.paramDatePower, this.nowHoursPower);
        this.timePic(
          "blockPercentage",
          this.paramDateBlockPercentage,
          this.nowHoursBlockPercentage
        );
      } else if (name === "3") {
        this.minerPic("minerId", this.paramDateTime, this.nowHoursTime);
        this.minerPic(
          "minerIdBalance",
          this.paramDateTimeBalance,
          this.nowHoursTimeBalance
        );
      }
    },
    timePic(type, paramDate, paramHours) {
      let a = new Date();
      let b = new Date();
      b.setHours(b.getHours() - 1);
      let hours = this.dateFtt("hh:mm", a);
      paramDate.beginHoursPic = this.dateFtt("hh:mm", b);
      paramDate.endHoursPic = hours;
      paramDate.beginTimePic = this.dateFtt("yyyy-MM-dd", a);
      paramDate.endTimePic = this.dateFtt("yyyy-MM-dd", a);
      paramHours = [paramDate.beginHoursPic, paramDate.endHoursPic];
      if (type === "capacityUp") {
        this.nowHours = [
          this.paramDateCapacity.beginHoursPic,
          this.paramDateCapacity.endHoursPic
        ];
      } else if (type === "balanceUp") {
        this.nowHoursBalanceUp = [
          this.paramDateBalanceUp.beginHoursPic,
          this.paramDateBalanceUp.endHoursPic
        ];
      } else if (type === "power") {
        this.nowHoursPower = [
          this.paramDatePower.beginHoursPic,
          this.paramDatePower.endHoursPic
        ];
      } else if (type === "blockPercentage") {
        this.nowHoursBlockPercentage = [
          this.paramDateBlockPercentage.beginHoursPic,
          this.paramDateBlockPercentage.endHoursPic
        ];
      } else if (type === "balanceUpPercent") {
        this.nowHoursbalanceUpPercent = [
          this.paramDatebalanceUpPercent.beginHoursPic,
          this.paramDatebalanceUpPercent.endHoursPic
        ];
      }
      this.getReportPicData(0, 100, paramDate, type);
    },
    minerPic(type, paramDate, paramHours) {
      paramDate.endTimePic = this.$moment().format("YYYYMMDD");
      paramDate.beginTimePic = this.$moment()
        .subtract(12, "hours")
        .format("YYYYMMDD");
      paramDate.endHoursPic = this.$moment().format("HH");
      paramDate.beginHoursPic = this.$moment()
        .subtract(12, "hours")
        .format("HH");
      paramHours = [paramDate.beginHoursPic, paramDate.endHoursPic];
      if (type === "minerId") {
        this.nowHoursTime = [
          this.$moment()
            .subtract(12, "hours")
            .format("HH"),
          this.$moment().format("HH")
        ];
        this.getTimePicData(paramDate, type, this.minerId);
      }
      if (type === "minerIdBalance") {
        this.nowHoursTimeBalance = [
          this.$moment()
            .subtract(12, "hours")
            .format("HH"),
          this.$moment().format("HH")
        ];
        this.getTimePicData(paramDate, type, this.minerIdBalance);
      }
    },

    changeDateStart(date) {
      this.paramDateCapacity.beginTimePic = date;
    },
    changeDateEnd(date) {
      this.paramDateCapacity.endTimePic = date;
    },

    changeDateBalanceUpStart(date) {
      this.paramDateBalanceUp.beginTimePic = date;
    },
    changeDateBalanceUpEnd(date) {
      this.paramDateBalanceUp.endTimePic = date;
    },

    changeDatePowerStart(date) {
      this.paramDatePower.beginTimePic = date;
    },
    changeDatePowerEnd(date) {
      this.paramDatePower.endTimePic = date;
    },

    changeDatePercentageStart(date) {
      this.paramDateBlockPercentage.beginTimePic = date;
    },
    changeDatePercentageEnd(date) {
      this.paramDateBlockPercentage.endTimePic = date;
    },

    changeDatebalanceUpPercentStart(date) {
      this.paramDatebalanceUpPercent.beginTimePic = date;
    },
    changeDatebalanceUpPercentEnd(date) {
      this.paramDatebalanceUpPercent.endTimePic = date;
    },
    changeDateTimeStart(date) {
      this.paramDateTime.beginTimePic = date.replace(/-/g, "");
    },
    changeDateTimeEnd(date) {
      this.paramDateTime.endTimePic = date.replace(/-/g, "");
    },

    changeDateTimeStartBalance(date) {
      this.paramDateTimeBalance.beginTimePic = date.replace(/-/g, "");
    },
    changeDateTimeEndBalance(date) {
      this.paramDateTimeBalance.endTimePic = date.replace(/-/g, "");
    },

    changHourbalanceUpPercentPic(hours) {
      let a = hours[0].replace(/点/, ":");
      let a_1 = a.replace(/分/, "");
      let b = hours[1].replace(/点/, ":");
      let b_1 = b.replace(/分/, "");
      this.nowHoursbalanceUpPercent[0] = a_1 + ":00";
      this.nowHoursbalanceUpPercent[1] = b_1 + ":00";
    },

    changHourPic(hours) {
      let a = hours[0].replace(/点/, ":");
      let a_1 = a.replace(/分/, "");
      let b = hours[1].replace(/点/, ":");
      let b_1 = b.replace(/分/, "");
      this.nowHours[0] = a_1 + ":00";
      this.nowHours[1] = b_1 + ":00";
    },
    changHourBalanceUpPic(hours) {
      let a = hours[0].replace(/点/, ":");
      let a_1 = a.replace(/分/, "");
      let b = hours[1].replace(/点/, ":");
      let b_1 = b.replace(/分/, "");
      this.nowHoursBalanceUp[0] = a_1 + ":00";
      this.nowHoursBalanceUp[1] = b_1 + ":00";
    },

    changHourPowerPic(hours) {
      let a = hours[0].replace(/点/, ":");
      let a_1 = a.replace(/分/, "");
      let b = hours[1].replace(/点/, ":");
      let b_1 = b.replace(/分/, "");
      this.nowHoursPower[0] = a_1 + ":00";
      this.nowHoursPower[1] = b_1 + ":00";
    },

    changHourPercentagePic(hours) {
      let a = hours[0].replace(/点/, ":");
      let a_1 = a.replace(/分/, "");
      let b = hours[1].replace(/点/, ":");
      let b_1 = b.replace(/分/, "");
      this.nowHoursBlockPercentage[0] = a_1 + ":00";
      this.nowHoursBlockPercentage[1] = b_1 + ":00";
    },
    changHourTime(hours) {
      let a = hours[0].replace(/点/, "");
      let b = hours[1].replace(/点/, "");
      this.nowHoursTime[0] = a;
      this.nowHoursTime[1] = b;
    },
    changHourTimeBalance(hours) {
      let a = hours[0].replace(/点/, "");
      let b = hours[1].replace(/点/, "");
      this.nowHoursTimeBalance[0] = a;
      this.nowHoursTimeBalance[1] = b;
    },
    checkPicTime() {
      if (!this.minerId) {
        this.$Message.error("请输入矿机ID");
        return;
      }
      this.checkComPic("minerId", this.paramDateTime, this.nowHoursTime);
    },
    checkPicTimeBalance() {
      if (!this.minerIdBalance) {
        this.$Message.error("请输入矿机ID");
        return;
      }
      this.checkComPic(
        "minerIdBalance",
        this.paramDateTimeBalance,
        this.nowHoursTimeBalance
      );
    },
    checkPicbalanceUpPercent() {
      this.checkComPic(
        "balanceUpPercent",
        this.paramDatebalanceUpPercent,
        this.nowHoursbalanceUpPercent
      );
    },
    checkPic() {
      this.checkComPic("capacityUp", this.paramDateCapacity, this.nowHours);
    },
    checkBalanceUpPic() {
      this.checkComPic(
        "balanceUp",
        this.paramDateBalanceUp,
        this.nowHoursBalanceUp
      );
    },
    checkPowerPic() {
      this.checkComPic("power", this.paramDatePower, this.nowHoursPower);
    },
    checkPercentagePic() {
      this.checkComPic(
        "blockPercentage",
        this.paramDateBlockPercentage,
        this.nowHoursBlockPercentage
      );
    },
    checkComPic(type, paramDate, paramHours) {
      if (!paramDate.beginTimePic) {
        this.$Message.info("请选择开始日期");
        return;
      }
      if (!paramDate.endTimePic) {
        this.$Message.info("请选择结束日期");
        return;
      }
      if (!paramHours) {
        this.$Message.info("请选择小时");
        return;
      }
      paramDate.beginHoursPic = paramHours[0];
      paramDate.endHoursPic = paramHours[1];
      if (type === "minerId") {
        this.getTimePicData(paramDate, type, this.minerId);
      } else if (type === "minerIdBalance") {
        this.getTimePicData(paramDate, type, this.minerIdBalance);
      } else {
        this.getReportPicData(0, 100, paramDate, type);
      }
    }
  }
};
</script>

<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.title {
  color: #666;
  font-size: 24px;
}

.banner {
  margin-top: 20px;
}

.time {
  margin-bottom: 20px;
}
.miner {
  width: 50%;
  height: 100px;
  margin-top: 10px;
  font-size: 20px;
}
.miner span {
  margin-right: 10px;
}
.ivu-table .demo-table-info-row td {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table td.demo-table-info-column {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-name {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-age {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table .demo-table-info-cell-address {
  background-color: #187;
  color: #fff;
}
</style>